<template>
	<view>
		<view class="drawer-button" @click="toggleDrawer">
			<view class="drawer-header">
				<text>基本信息</text>
				<icon v-if="showRightArrow" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
				<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
			</view>
		</view>
		<view class="drawer-content" :class="{ 'show': showDrawer }">
			<view>
				<text>任务编码：{{pojo.id}}</text>
			</view>
			<view>
				<icon class="iconfont icon-dingwei" style="font-size:24px;"></icon>
				起：{{pojo.startAddress}}
			</view>
			<view>
				<icon class="iconfont icon-zhunxing" style="font-size:24px;"></icon>
				止：{{pojo.endAddress}}
			</view>
			<view>
				联系人：{{pojo.lxr}}
			</view>
			<view>
				联系电话：{{pojo.phone}}<icon class="iconfont icon-dianhua" style="font-size:24px;"></icon>
			</view>
			<view>
				提货时间：{{pojo.thsj}}
			</view>
			<view>
				预达时间：{{pojo.sdsj}}
			</view>
		</view>
		<view class="drawer-button" @click="toggleDrawera">
			<view class="drawer-header">
				<text>车辆司机信息</text>
				<icon v-if="showRightArrowa" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
				<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
			</view>
		</view>
		<view class="drawer-content" :class="{ 'show': showDrawera }">
			<view><text class="label">车牌号:</text><text class="value">{{ pojo.cph }}</text></view>
			<view><text class="label">司机姓名:</text>
				<block v-for="(contact, index) in pojo.sj" :key="index">
				    <text class="value">{{ contact.name }}</text>
				</block>
			</view>
		</view>
		<view class="drawer-button" @click="toggleDrawerb">
			<view class="drawer-header">
				<text>运输路线</text>
				<icon v-if="showRightArrowb" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
				<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
			</view>
		</view>
		<view class="drawer-content" :class="{ 'show': showDrawerb }">
			<view style="text-align: center;font-size: 10px;"><text>计划{{pojo.sdsj}}送达</text></view>
			<view class="container"><text class="labela">{{dza}}</text><icon class="iconfont icon-changjiantou"></icon><text class="valuea" >{{dzb}}</text></view>
		</view>
		<view class="drawer-button" @click="toggleDrawerc">
			<view class="drawer-header">
				<text>货物信息</text>
				<icon v-if="showRightArrowc" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
				<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
			</view>
		</view>
		<view class="drawer-content" :class="{ 'show': showDrawerc }">
			<view>共计：{{pojo.ds}}</view>
			<view class="search-container">
			    运单号：<input class="verification-code-input" placeholder="运单号" v-model="tj1"/>
			    <icon type="search" @click="sousuo"></icon>
			</view>
			<view>
				<view class="table-container">
				  <view class="table-row" v-for="(item, index) in pojo.hr" :key="index">
				    <view class="table-cell">{{ item.ydh }}</view>
				    <view class="table-cell">
				      {{ item.ds }}<template v-if="item.ds !== ''">个</template>
				    </view>
				    <view class="table-cell">
				      {{ item.zl }}<template v-if="item.zl !== ''">kg</template>
				    </view>
				  </view>
				</view>
			</view>
		</view>
		<view class="drawer-button" @click="toggleDrawere">
			<view class="drawer-header">
				<text>异常信息</text>
				<icon v-if="showRightArrowe" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
				<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
			</view>
		</view>
		<view class="drawer-content" :class="{ 'show': showDrawere }">
			<button style="color: darkgray;font-size: 20rpx;height: 50rpx;" type="default" @click="ckyc">{{yc.ycsj}}前往<icon class="iconfont icon-xiangyou1" style="font-size:10px;position: absolute; right: 0;top: 0rpx;"></icon></button>
			<view>
				<text>异常类型：{{yc.yclx}}</text>
			</view>
			<view>
				<text>处理结果：{{yc.cljg}}</text>
			</view>
		</view>
		<view class="drawer-button" @click="toggleDrawerd">
			<view class="drawer-header">
				<text>交货信息</text>
				<icon v-if="showRightArrowd" class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
				<icon v-else class="iconfont icon-xiangxia" style="font-size:24px;"></icon>
			</view>
		</view>
		<view class="drawer-content" :class="{ 'show': showDrawerd }">
			<view>
				<text>请拍照上传回单凭证</text>
			</view>
			<view class="avatar-row">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" v-if="tp.length<3">
					<icon class="iconfont icon-tupian" style="font-size: 50rpx;"></icon>
				</button>
				<image class="avatar" :src="tp[0]" v-if="tp.length>=1"></image>
				<image class="avatar" :src="tp[1]" v-if="tp.length>=2"></image>
				<image class="avatar" :src="tp[2]" v-if="tp.length>=3"></image>
			</view>
			<view>
				<text>请上传货品照片</text>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatara" v-if="tpa===''" style="margin-bottom: 75rpx;">
					<icon class="iconfont icon-tupian" style="font-size: 50rpx;"></icon>
				</button>
				<view class="avatar-row">
					<image class="avatar" :src="tpa" v-if="tpa!=''"></image>
				</view>
			</view>
		</view>
		<view class="fixed-button-row">
			<button type="primary" style="width: 50%;" @click="yichang">上报异常</button>
			<button type="primary" style="width: 50%;" @click="sonda" :disabled="isButtonDisabled">送达中转站点</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pojo:{
					id:'',
					lxr:'',
					cph:'',
					phone:'',
					ds:'',
					sj:[],
					hr:[],
					jda:'',
					wda:'',
					jdb:'',
					wdb:'',
					thsj:'',
					sdsj:'',
					startAddress: '',
					endAddress: ''
				},
				showDrawer: false,
				showRightArrow: true,
				showDrawera: false,
				showRightArrowa: true,
				showDrawerb:false,
				showRightArrowb: true,
				showDrawerc:false,
				showRightArrowc: true,
				showDrawerd:false,
				showRightArrowd: true,
				showDrawere:false,
				showRightArrowe: true,
				tp:[],
				tpa:'',
				dza:'路线A\n路线A.a',
				dzb:'路线B\n路线B.b',
				yc:{
					ycsj:'2024-08-01 09:00:00',
					yclx:'发生事故',
					cljg:'继续运输'
				},
				tj1:''
			}
		},
		methods: {
			toggleDrawer() {
			  this.showDrawer = !this.showDrawer;
			  this.showRightArrow = !this.showRightArrow;
			},
			toggleDrawera() {
			  this.showDrawera = !this.showDrawera;
			  this.showRightArrowa = !this.showRightArrowa;
			},
			toggleDrawerb() {
			  this.showDrawerb = !this.showDrawerb;
			  this.showRightArrowb = !this.showRightArrowb;
			},
			toggleDrawerc() {
			  this.showDrawerc = !this.showDrawerc;
			  this.showRightArrowc = !this.showRightArrowc;
			},
			toggleDrawerd() {
			  this.showDrawerd = !this.showDrawerd;
			  this.showRightArrowd = !this.showRightArrowd;
			},
			toggleDrawere() {
			  this.showDrawere = !this.showDrawere;
			  this.showRightArrowe = !this.showRightArrowe;
			},
			onChooseAvatar(e) {
				const { avatarUrl }=e.detail
				if(this.tp.length===0){
					this.tp[0]=avatarUrl
				}else if(this.tp.length===1){
					this.tp[1]=avatarUrl
				}else{
					this.tp[2]=avatarUrl
				}
			},
			onChooseAvatara(e) {
				const { avatarUrl }=e.detail
				this.tpa=avatarUrl
			},
			sousuo(){
				console.log(this.tj1)
			},
			yichang(){
				var pojoa={}
				pojoa.pd=1
				pojoa.nra='a'
				wx.navigateTo({
					url:'/pages/index/Zaituml/Shangbaoyichang?value='+encodeURIComponent(JSON.stringify(pojoa))
				})
			},
			sonda(){
				wx.navigateTo({
					url:'/pages/index/Zaituml/Jiaofu?value='+encodeURIComponent(JSON.stringify(this.pojo))
				})
			},
			ckyc(){
				var pojoa={}
				pojoa.pd=3
				wx.navigateTo({
					url:'/pages/index/Zaituml/Shangbaoyichang?value='+encodeURIComponent(JSON.stringify(pojoa))
				})
			}
		},
		onLoad:function(options){
			const receivedEntity = JSON.parse(decodeURIComponent(options.value));
			this.pojo=receivedEntity
		},
		computed:{
			isButtonDisabled(){
				return this.tp.length < 3 || this.tpa === '';
			},
		}
	}
</script>

<style scoped>
.drawer-button {
  width: 100%;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  user-select: none;
	display: flex; /* 新增 */
	align-items: center; /* 新增 */
	justify-content: space-between; /* 新增 */
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 95%;
}

.arrow-down {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-bottom: 0;
  border-left: 4px solid transparent;
}

.drawer-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  
}

.drawer-content.show {
  display: block;
}
.iconfont {
  margin-right: 0%; /* 新增 */
}

.label {
    width: 20%;
    float: left;
    text-align: right;
    padding-right: 1em; /* 添加一些内边距以增加松弛感 */
}

.value {
    margin-left: 10%; /* 确保从左侧30%的位置开始显示内容 */
    clear: both; /* 清除浮动 */
	margin-bottom: 1em;
}
.labela {
    width: 20%;
    float: left;
    text-align: right;
    padding-right: 1em; /* 添加一些内边距以增加松弛感 */
}

.valuea {
    margin-left: 40%; /* 确保从左侧30%的位置开始显示内容 */
    clear: both; /* 清除浮动 */
	margin-bottom: 1em;
}
.icon-changjiantou {
    display: inline-block; /* 确保它作为一个块级元素显示 */
    font-size: 5em; /* 调整图标大小 */
	height: 50rpx;
    transform: scaleX(3); /* 横向拉伸两倍 */
    transform-origin: 0 50%; /* 从左端开始拉伸 */
}
.container {
    display: flex;
}
.search-container {
    display: flex; /* 使子元素在同一行显示 */
    align-items: center; /* 垂直居中对齐 */
}

.verification-code-input {
    border: 1px solid #ccc; /* 添加边框 */
    padding: 5px; /* 内边距 */
	width: 70%;
    margin-right: 5px; /* 右侧外边距，用于与图标分隔 */
}

/* 如果你的 <icon> 元素需要特定样式，例如设置图标大小等，也可以添加 */
.icon[type="search"] {
    /* 可以在这里定义图标的样式，例如字体大小、颜色等 */
}
.table-container {
  display: flex;
  flex-direction: column;
}

.table-row {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
  border-bottom: 1px solid #ccc;
}

.table-cell {
  flex: 1;
  padding: 0 10rpx;
  text-align: center;
}
.avatar{
	width: 25%;
	height: 100rpx;
	margin-bottom: 75rpx;
}
.avatar-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 20rpx;
}

.fixed-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  background-color: #fff;
  z-index: 1000; /* 确保按钮层叠在其他内容之上 */
}

/* 按钮样式 */
.fixed-button-row button {
  width: 50%;
  height: 100%;
  line-height: 80rpx;
  text-align: center;
  border: none;
  color: #333;
  font-size: 30rpx;
}
</style>
